<template>
  <div>
    <div class="title">专题精选</div>
    <van-swipe :loop="false" :width="350" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.item_pic_url" alt="" width="100%" height="200" />
        <span class="name">{{ item.title }}</span>
        <span class="price">{{ item.price_info | moneyFilters }}起</span>
        <p class="subtitle">{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
 
<script>
export default {
  name: "",
  props: ["topicList"],
};
</script>
 
<style lang="less" scoped>
.title {
  background: #fff;
  line-height: 0.5rem;
  height: 0.5rem;
  text-align: center;
}
.name {
  font-size: 0.16rem;
  color: #000000;
  height: 0.4rem;
  line-height: 0.4rem;
  padding-right: 0.1rem;
}
.price {
  font-size: 0.15rem;
  color: red;
}
.subtitle {
  color: #666666;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 0.1rem;
}
.van-swipe {
  padding: 0 0.05rem;
  background: #fff;
  .van-swipe-item {
    padding-right: 0.1rem;
  }
}
</style>